<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      :title="dataList.EditPermission"
      align="center"
      class="elDialog base-dialog"
      :custom-class="'panna-dialog_medium'"
      :close-on-click-modal="false"
      :visible.sync="innerDialogVisible"
    >
      <!--应用列表 没有角色列表不展示-->
      <el-tabs
        v-model="activeTabsIndex"
        type="card"
        height="45px"
        @tab-click="clickTabs"
      >
        <el-tab-pane
          v-for="(item, index) in appList"
          :key="index"
          :label="item.appName"
          :name="`${index}`"
        >
          <div slot="label">
            <span
              class="auth-title"
              :title="$i18n.locale === 'en' ? item.appKey : item.appName"
              >{{ $i18n.locale === "en" ? item.appKey : item.appName }}</span
            >
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="role-authority-card elDialogDiv" align="left">
        <div v-for="(item, index) in authorityData" :key="index">
          <div
            class="role-auth-card-item authority-item"
            :class="{
              'first-item': item.children && item.children.length,
            }"
          >
            <div class="authority-item-title">
              <input
                :id="'menu_' + item.id"
                v-model="item.isChecked"
                type="checkbox"
                @click="changeFirst(item)"
              />
              <label
                :for="'menu_' + item.id"
                class="cbLabel"
                :title="$i18n.locale === 'en' ? item.eName : item.name"
              >
                {{ $i18n.locale === "en" ? item.eName : item.name }}
              </label>
            </div>

            <div
              v-if="item.children && item.children.length"
              class="role-children-item first-level-item"
            >
              <div
                v-for="(itemChild, indexChild) in item.children"
                :key="indexChild"
              >
                <div
                  v-if="itemChild.children && itemChild.children.length"
                  class="authority-item-title second-item-title"
                >
                  <input
                    :id="'menu_sub_' + itemChild.id"
                    v-model="itemChild.isChecked"
                    type="checkbox"
                    @change="changeSecond(itemChild, item)"
                  />
                  <label
                    :for="'menu_sub_' + itemChild.id"
                    class="cbLabel"
                    :title="
                      $i18n.locale === 'en' ? itemChild.eName : itemChild.name
                    "
                  >
                    {{
                      $i18n.locale === "en" ? itemChild.eName : itemChild.name
                    }}
                  </label>
                  <div v-if="itemChild.children && itemChild.children.length">
                    <div
                      v-for="(threeChild, threeIndex) in itemChild.children"
                      :key="threeIndex"
                    >
                      <div class="authority-item-title three-item-title">
                        <input
                          :id="'menu_sub_' + threeChild.id"
                          v-model="threeChild.isChecked"
                          type="checkbox"
                          @change="changeSecond(threeChild, itemChild)"
                        />
                        <label
                          :for="'menu_sub_' + threeChild.id"
                          class="cbLabel"
                          :title="
                            $i18n.locale === 'en'
                              ? threeChild.eName
                              : threeChild.name
                          "
                        >
                          {{
                            $i18n.locale === "en"
                              ? threeChild.eName
                              : threeChild.name
                          }}
                        </label>
                      </div>
                      <div
                        v-for="(
                          itemButton, indexButton
                        ) in threeChild.buttonChildren"
                        :key="indexButton"
                        class="second-level-item third-item-title"
                      >
                        <div class="authority-item-title">
                          <input
                            :id="'button_' + itemButton.id"
                            v-model="itemButton.isChecked"
                            type="checkbox"
                            @change="changeThird(itemButton, itemChild)"
                          />
                          <label
                            :for="'button_' + itemButton.id"
                            class="cbLabel"
                            :title="
                              $i18n.locale === 'en'
                                ? itemButton.eName
                                : itemButton.name
                            "
                          >
                            {{
                              $i18n.locale === "en"
                                ? itemButton.eName
                                : itemButton.cName
                            }}
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- v-if="itemChild.children && itemChild.children.length" -->
                <div
                  v-for="(itemButton, indexButton) in itemChild.buttonChildren"
                  :key="indexButton"
                  class="first-level-item third-item-title"
                >
                  <div class="authority-item-title">
                    <input
                      :id="'button_' + itemButton.id"
                      v-model="itemButton.isChecked"
                      type="checkbox"
                      @change="changeThird(itemButton, itemChild)"
                    />
                    <label
                      :for="'button_' + itemButton.id"
                      class="cbLabel"
                      :title="
                        $i18n.locale === 'en'
                          ? itemButton.eName
                          : itemButton.cName
                      "
                    >
                      {{
                        $i18n.locale === "en"
                          ? itemButton.eName
                          : itemButton.cName
                      }}
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="item.buttonChildren && item.buttonChildren.length">
              <div
                v-for="(itemButton, indexButton) in item.buttonChildren"
                :key="indexButton"
                class="first-level-item third-item-title"
              >
                <div class="authority-item-title">
                  <input
                    :id="'button_' + itemButton.id"
                    v-model="itemButton.isChecked"
                    type="checkbox"
                    @change="changeThird(itemButton, item)"
                  />
                  <label
                    :for="'button_' + itemButton.id"
                    class="cbLabel"
                    :title="
                      $i18n.locale === 'en'
                        ? itemButton.eName
                        : itemButton.cName
                    "
                  >
                    {{
                      $i18n.locale === "en"
                        ? itemButton.eName
                        : itemButton.cName
                    }}
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="save">{{ btn.Save }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getExistsList,
  addRoleMenuRelation,
} from "../../api/Permission/PermissionRoleMenu.js";
import { getAppAllList } from "../../api/Permission/PermissionApp.js";

export default {
  name: "PermissionMenuSelectShow",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      innerDialogVisible: false,
      list: [],
      roleId: 0,
      activeTabsIndex: 0,
      appList: [],
      appKey: window.EnvConfig.VUE_APP_KEY,
      authorityData: [],
    };
  },
  computed: {
    btn() {
      return this.$t("Permission.buttons");
    },
    dataList() {
      return this.$t("Permission.PermissionUser");
    },
  },
  watch: {
    dialogVisible(val) {
      this.innerDialogVisible = val;
      if (val) {
        this.init();
      }
    },
    innerDialogVisible(val) {
      this.$emit("update:dialogVisible", val);
    },
  },
  created() {},
  methods: {
    async init() {
      await getAppAllList().then((res) => {
        this.appList = res.data;
      });
      await this.getList();
      this.clickTabs({ index: 0 });
    },
    // 点击复选框
    changeFirst(item) {
      // 将子集全部选中或取消选中
      this.formatChecked(item.children, !item.isChecked);
      this.formatCheckedForButton(item.buttonChildren, !item.isChecked);
    },
    changeSecond(item, parentItem) {
      // 将子集全部选中或取消选中
      this.formatCheckedForButton(item.buttonChildren, item.isChecked);
      // 将父级选中
      if (item.isChecked === true) {
        parentItem.isChecked = true;
      }
    },
    changeThird(item, parentItem) {
      // 将父级选中
      if (item.isChecked === true) {
        parentItem.isChecked = true;
      }
    },

    // 递归处理数据格式
    formatChecked(data, flag) {
      if (data && data.length) {
        data.forEach((v) => {
          v.isChecked = flag;
          if (v.children && v.children.length) {
            this.formatChecked(v.children, flag);
          }
          if (v.buttonChildren && v.buttonChildren.length) {
            this.formatCheckedForButton(v.buttonChildren, flag);
          }
        });
      }
    },
    formatCheckedForButton(data, flag) {
      if (data && data.length) {
        data.forEach((v) => {
          v.isChecked = flag;
        });
      }
    },

    cancel() {
      this.innerDialogVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    async getList() {
      this.loading = true;
      await getExistsList({ roleId: this.roleId, appKey: this.appKey })
        .then((res) => {
          this.list = res.data ? res.data : [];
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 选择应用标签
    clickTabs(tab) {
      this.loading = true;
      // 保存当前选择应用的下标 用来获取对应的菜单列表
      this.activeTabsIndex = `${tab.index}`;
      // 当前应用Id
      this.appKey = this.appList[this.activeTabsIndex].appKey;
      this.authorityData = this.list;
      // 从菜单记录中获取当前应用ID 下的菜单数据
      if (this.appKey !== "ILab" && this.appKey !== "") {
        this.authorityData = this.list.filter(
          (item) => item.appKey === this.appKey
        );
      }

      // this.isShowEmpty = this.authorityData.length ? this.authorityData.filter(v => v.checked || v.indeterminate).length === 0 : true;
      this.loading = false;
    },
    save() {
      this.loading = true;
      // 获取已经选中的记录
      var tmpMenuIds = [];
      var tmpButtonIds = [];

      this.findSelectMenuId(this.list, tmpMenuIds, tmpButtonIds);

      var data = {
        roleId: this.roleId,
        menuIds: tmpMenuIds,
        buttonIds: tmpButtonIds,
      };
      addRoleMenuRelation(data)
        .then((res) => {
          if (res.code === 200) {
            this.loading = false;
            this.innerDialogVisible = false;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    findSelectMenuId(data, resultMenuIdArray, resultButtonIdArray) {
      data.forEach((v) => {
        if (v.isChecked === true) {
          resultMenuIdArray.push(v.id);
        }
        if (v.children && v.children.length) {
          this.findSelectMenuId(
            v.children,
            resultMenuIdArray,
            resultButtonIdArray
          );
        }
        if (v.buttonChildren && v.buttonChildren.length) {
          this.findSelectMenuId(v.buttonChildren, resultButtonIdArray);
        }
      });
    },

    findSelectButtonId(data, resultButtonIdArray) {
      data.forEach((v) => {
        if (v.isChecked === true) {
          resultButtonIdArray.push(v.id);
        }
      });
    },
  },
};
</script>

<style lang="scss">
// .elDialog {
//   height: 100vh;
//   overflow: auto;
// }
// .elDialogDiv {
//   height: 65vh;
//   overflow: auto;
// }
.role-authority-card {
  &:last-child {
    .role-children-item {
      border-bottom: none;
    }
  }
  .role-auth-card-item {
    margin-right: 0;
    display: inline-block;
    padding: 16px 16px 0 16px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
  }
  .first-item {
    display: block;
  }
  .first-level-item {
    padding: 0 16px;
  }
  .second-level-item {
    padding: 0 32px;
  }
  .role-children-item {
    display: block;
    border-bottom: 1px #e6ecf1 solid;
  }
  .authority-item {
    width: 100%;
    border: 1px #e6ecf1 solid;
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 0 0 16px 0;
    & > .authority-item-title {
      height: 48px;
      line-height: 48px;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #4e4e4e;
      border-bottom: 1px #e6ecf1 solid;
      padding: 0 16px;
      background: #f1f8ff;
      font-weight: 500;
    }
    .second-item-title {
      margin-top: 10px;
      width: 100%;
    }
    .three-item-title {
      margin-top: 10px;
      padding: 0px 16px;
      width: 100%;
    }

    .third-item-title {
      margin-top: 10px;
      display: inline-block;
      width: 170px;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #4e4e4e;
    }
  }
  .cbLabel {
    margin-left: 5px;
    // margin-top: 15px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .authority-item-title {
    display: flex;
    align-items: center;
  }
}
</style>
